<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('项目列表')"/>
</head>
<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row col-sm-12" style="padding: 15px">
        <a class="btn btn-success" id="add-btn">
            <i class="fa fa-plus"></i> 新增项目
        </a>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>筹备中</h3>
                    <ul class="sortable-list connectList agile-list" id="status-0">
                        <li th:if="${projects.get(0) != null}" th:each="item : ${projects.get(0)}" th:id="${item.id}"
                            class="success-element">
                            <span class="label label-primary pull-right" th:text="${item.department}"></span>
                            <h5 th:text="${item.projectName}">IT-01 -
                                为视觉传达设计，是以是以“视觉”作为沟通和表现的方式，透过多种方式设计部</h5>
                            <hr>
                            <p th:utext="${item.content}">
                                平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
                            </p>
                            <div>
                                <span>当前项目进度：</span>
                                <div class="stat-percent" th:text="${item.progressRate + '%'}">48%</div>
                                <div class="progress progress-mini">
                                    <div th:style="'width:' + ${item.progressRate + '%'}" class="progress-bar"></div>
                                </div>
                            </div>
                            <div class="row  m-t-sm">
                                <div class="col-sm-6">
                                    <div class="font-bold">周期</div>
                                    [[${#dates.format(item.plannedStartTime, 'yyyy-MM-dd')}]] - [[${#dates.format(item.plannedEndTime, 'yyyy-MM-dd')}]]
                                    
                                </div>
                                <div class="col-sm-4">
                                    <div class="font-bold">负责人</div>
                                    [[${item.owner.userName}]]
                                </div>
                            </div>
                            <div class="agile-detail">
                                <a href="#" style="margin-left: 10px" th:onclick="edit([[${item.id}]])" class="pull-right btn btn-xs btn-primary">编辑</a>
                                <a href="#" class="pull-right btn btn-xs btn-danger" th:onclick='remove([[${item.id}]])'>删除</a>
                                <i class="fa fa-clock-o"></i> [[${#dates.format(item.createTime, 'yyyy-MM-dd')}]]
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>未启动</h3>
                    <ul class="sortable-list connectList agile-list" id="status-1">
                        <li th:if="${projects.get(1) != null}" th:each="item : ${projects.get(1)}" class="info-element" th:id="${item.id}">
                            <span class="label label-primary pull-right" th:text="${item.department}"></span>
                            <h5 th:text="${item.projectName}">IT-01 -</h5>
                            <hr>
                            <p th:utext="${item.content}"></p>
                            <div>
                                <span>当前项目进度：</span>
                                <div class="stat-percent" th:text="${item.progressRate + '%'}">48%</div>
                                <div class="progress progress-mini">
                                    <div th:style="'width:' + ${item.progressRate + '%'}" class="progress-bar"></div>
                                </div>
                            </div>
                            <div class="row  m-t-sm">
                                <div class="col-sm-6">
                                    <div class="font-bold">周期</div>
                                    [[${#dates.format(item.plannedStartTime, 'yyyy-MM-dd')}]] - [[${#dates.format(item.plannedEndTime, 'yyyy-MM-dd')}]]

                                </div>
                                <div class="col-sm-4">
                                    <div class="font-bold">负责人</div>
                                    [[${item.owner.userName}]]
                                </div>
                            </div>
                            <div class="agile-detail">
                                <a href="#" style="margin-left: 10px" th:onclick="edit([[${item.id}]])" class="pull-right btn btn-xs btn-primary">编辑</a>
                                <a href="#" class="pull-right btn btn-xs btn-danger" th:onclick='remove([[${item.id}]])'>删除</a>
                                <i class="fa fa-clock-o"></i> [[${#dates.format(item.createTime, 'yyyy-MM-dd')}]]
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>进行中</h3>
                    <ul class="sortable-list connectList agile-list" id="status-2">
                        <li th:if="${projects.get(2) != null}" th:each="item : ${projects.get(2)}" th:id="${item.id}" class="danger-element">
                            <span class="label label-primary pull-right" th:text="${item.department}"></span>
                            <h5 th:text="${item.projectName}">IT-01 -</h5>
                            <hr>
                            <p th:utext="${item.content}">
                            </p>
                            <div>
                                <span>当前项目进度：</span>
                                <div class="stat-percent" th:text="${item.progressRate + '%'}">48%</div>
                                <div class="progress progress-mini">
                                    <div th:style="'width:' + ${item.progressRate + '%'}" class="progress-bar"></div>
                                </div>
                            </div>
                            <div class="row  m-t-sm">
                                <div class="col-sm-6">
                                    <div class="font-bold">周期</div>
                                    [[${#dates.format(item.plannedStartTime, 'yyyy-MM-dd')}]] -
                                    [[${#dates.format(item.plannedEndTime, 'yyyy-MM-dd')}]]
                                </div>
                                <div class="col-sm-4">
                                    <div class="font-bold">负责人</div>
                                    [[${item.owner.userName}]]
                                </div>
                            </div>
                            <div class="agile-detail">
                                <a href="#" style="margin-left: 10px" th:onclick="edit([[${item.id}]])"
                                   class="pull-right btn btn-xs btn-primary">编辑</a>
                                <a href="#" class="pull-right btn btn-xs btn-danger"
                                   th:onclick='remove([[${item.id}]])'>删除</a>
                                <i class="fa fa-clock-o"></i> [[${#dates.format(item.createTime, 'yyyy-MM-dd')}]]
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>已完成</h3>
                    <ul class="sortable-list connectList agile-list" id="status-3">
                        <li th:if="${projects.get(3) != null}" th:each="item : ${projects.get(3)}" th:id="${item.id}" class="warning-element">
                            <span class="label label-primary pull-right" th:text="${item.department}"></span>
                            <h5 th:text="${item.projectName}">IT-01 -</h5>
                            <hr>
                            <p th:utext="${item.content}">
                            </p>
                            <div>
                                <span>当前项目进度：</span>
                                <div class="stat-percent" th:text="${item.progressRate + '%'}">48%</div>
                                <div class="progress progress-mini">
                                    <div th:style="'width:' + ${item.progressRate + '%'}" class="progress-bar"></div>
                                </div>
                            </div>
                            <div class="row  m-t-sm">
                                <div class="col-sm-6">
                                    <div class="font-bold">周期</div>
                                    [[${#dates.format(item.plannedStartTime, 'yyyy-MM-dd')}]] -
                                    [[${#dates.format(item.plannedEndTime, 'yyyy-MM-dd')}]]

                                </div>
                                <div class="col-sm-4">
                                    <div class="font-bold">负责人</div>
                                    [[${item.owner.userName}]]
                                </div>
                            </div>
                            <div class="agile-detail">
                                <a href="#" style="margin-left: 10px" th:onclick="edit([[${item.id}]])"
                                   class="pull-right btn btn-xs btn-primary">编辑</a>
                                <a href="#" class="pull-right btn btn-xs btn-danger"
                                   th:onclick='remove([[${item.id}]])'>删除</a>
                                <i class="fa fa-clock-o"></i> [[${#dates.format(item.createTime, 'yyyy-MM-dd')}]]
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
<script>
    var prefix = ctx + "projects/projects";
    $(document).ready(function () {
        $(".sortable-list").sortable({
            connectWith: ".connectList",
            items :"li",
            update: function (event, ui) {
                if (ui.sender == null) {
                    return;
                }
                let statusId = event.target.id;
                let pid = ui.item.attr('id');
                $.ajax({
                    type: "post",
                    url: prefix + "/edit",
                    data: {
                        "id": pid,
                        "status": statusId.split("-")[1]
                    }
                });
            }
        }).disableSelection()
    });


    $("#add-btn").click(function(){
        $.modal.open("添加项目", prefix + "/add");
    })

    function edit(id) {
        $.modal.open("修改项目", prefix + "/edit/" + id);
    }

    function remove(id) {
        $.modal.confirm("确定删除该条项目信息吗？", function() {
            var data = { "ids": id };
            $.operate.submit(prefix + "/remove", "post", "json", data);
            $.modal.msgSuccessReload('删除成功');
        });
    }
</script>
</body>
</html>
